<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transition</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_3211631_kw4jmvuuvl.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3180556_s5s166aqtuh.css">

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,body,#root {
      width: 100%;
      height: 100%;
    }

    #root {
      display: flex;
    }

    #box1 {
      width:300px;
      height: 100%;
      background-color: rgb(79, 123, 243);
      transition: all .5s;
    }

    #box1 ul li {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transition: all .5s;
    }

    #box1 ul li:hover {
      color: rgb(79, 123, 243);
      cursor: pointer;
    }

    #box2 {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .iconfont {
      font-size: 36px;
    }

    .top {
      width: 100%;
      height: 47px;
      background-color: rgb(79, 123, 243);
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      padding:33px;
    }

    .top span {
      position: relative;
    }

    #box2 .content {
      display:flex;
      flex:1;
      justify-content: center;
      align-items: center;
    }

    #box2 .content div{
      width: 950px;
      height: 400px;
      color: rgb(146, 143, 143);
      border: 2px solid #ccc;
      border-radius: 15px;
      box-shadow: 0px 0px 10px 5px #ccc;
      font-size: 40px;
      font-weight: 600;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
</head>

<body>
  <div id="root">

    <div id="box1" :style="{width:box1Width}">
      <ul>
        <li @click="who='index'" class="iconfont icon-zhankai"> 后台{{widthFn}}</li>
        <li @click="who='goods'" class="iconfont icon-zhankai"> 商品{{widthFn}}</li>
        <li @click="who='orders'" class="iconfont icon-zhankai"> 订单{{widthFn}}</li>
        <li @click="who='users'" class="iconfont icon-zhankai"> 用户{{widthFn}}</li>
      </ul>
    </div>

    <div id="box2">

      <div class="top">
        <span :class="cutClass[number]" @click="clickFn"></span>
        <span style="top:-8px">后台管理 &gt;</span>
        <transition appear enter-active-class="animated fadeInRight">
          <span v-for="item in [
            {id:1,url:'index',name:'后台管理'},
            {id:2,url:'goods',name:'商品管理'},
            {id:3,url:'orders',name:'订单管理'},
            {id:4,url:'users',name:'用户管理'}
          ]" style="top:-8px;display: inline-block;" v-if="who===item.url" :key="item.id">{{item.name}}</span>
        </transition>
      </div>

      <div class="content">
        <transition appear enter-active-class="animated fadeInRight">
          <component :is="who"></component>
        </transition>
      </div>

    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('index', {
      template: `<div>
        <p>welcome to 后台首页</p>
      </div>`
    })

    Vue.component('goods', {
      template: `<div>
        <p>welcome to 商品管理页</p>
      </div>`
    })

    Vue.component('orders', {
      template: `<div>
        <p>welcome to 订单管理页</p>
      </div>`
    })

    Vue.component('users', {
      template: `<div>
        <p>welcome to 用户管理页</p>
      </div>`
    })

    const vm = new Vue({
      el: "#root",
      data: {
        who: 'index',
        box1Width: '200px',
        cutClass: ['iconfont  icon-shouqicaidan', 'iconfont  icon-zhankaicaidan'],
        number: 0
      },
      methods: {
        clickFn() {
          if (this.box1Width === '200px') {
            this.box1Width = '90px'
            this.number = 0
          } else {
            this.box1Width = '200px'
            this.number = 1
          }
          /* ? :  */
        }
      },
      computed: {
        widthFn() {
          return this.box1Width === '200px' ? '首页' : ''
        }
      }
    })

  </script>
</body>

</html>